<template>
  <div class="emptyPage">
    <view
      class="empty-box"
      :style="{
        marginTop: top + 'rpx',
        background: showBg ? '#fff' : 'transparent',
      }"
    >
      <view class="img_box">
        <image src="@/static/image/emptyBg.png" mode="widthFix"></image>
      </view>

      <view class="txt">{{ text}}</view>
    </view>
  </div>
</template>

<script lang="ts" setup>
const { text, top, showBg } = defineProps({
  text: {
    type: String,
    default: "暂无数据",
  },
  top: {
    type: Number,
    default: 200,
  },
  showBg: {
    type: Boolean,
    default: false,
  },
});
</script>

<style scoped lang="scss">
.empty-box {
  position: relative;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  padding: 30rpx;
  .img_box {
    width: 340rpx;
    image {
      width: 100%;
    }
  }

  .txt {
    margin: 30rpx 0 30rpx;
    font-size: 35rpx;
    color: #6e6e6e;
  }
}
</style>